<template>
  <div id="app" class="marginTop10">
    <TopMenu />
    <div class="minus10">
      <SliderEg />
    </div>
    <StepsEg />
    <BrandCrumb />
    <FormTable />
    <div class="minus10">
      <TableList />
    </div>
    <div class="minus10">
      <UseAbstractTableList />
    </div>
    <BadgeButton />
    <UseAbstractBadge />
  </div>
</template>

<script>
import SliderEg from "./components/SliderEg.vue";
import TopMenu from "./components/TopMenu.vue";
import StepsEg from "./components/StepsEg.vue";
import BrandCrumb from "./components/BrandCrumb.vue";
import FormTable from "./components/FormTable.vue";
import TableList from "./components/TableList.vue";
import UseAbstractTableList from "./components/UseAbstractTableList.vue";
import BadgeButton from "./components/BadgeButton.vue";
import UseAbstractBadge from "./components/UseAbstractBadge.vue";

export default {
  name: "App",
  components: {
    TopMenu,
    SliderEg,
    StepsEg,
    BrandCrumb,
    FormTable,
    TableList,
    UseAbstractTableList,
    BadgeButton,
    UseAbstractBadge,
  },
};
</script>

<style>
#app {
  width: 80%;
  margin: auto;
}
.minus10 {
  /* 空着即可，也可以留一个注释提醒别人 */
}

/* 真正生效的是下面这条：把容器里所有子元素左右各减 10 px */
.minus10 > * {
  padding-left: 10px;
  padding-right: 10px;
}
.marginTop10 {
  /* 空着 代表父组件来控制 */
}
.marginTop10 > * {
  padding-bottom: 20px;
}
</style>
